---
title: Core Features
icon: Cpu
---

import RibbonStyle from '@/components/ribbon-style'

<MetaData
  lang="en-US"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-core',
      locale: '@univerjs/preset-sheets-core/locales/en-US',
      style: '@univerjs/preset-sheets-core/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/core',
    }, {
      client: '@univerjs/engine-formula',
    }, {
      client: '@univerjs/engine-render',
    }, {
      client: '@univerjs/design',
      locale: '@univerjs/design/locale/en-US',
      style: '@univerjs/design/lib/index.css',
    }, {
      client: '@univerjs/ui',
      locale: '@univerjs/ui/locale/en-US',
      style: '@univerjs/ui/lib/index.css',
    }, {
      client: '@univerjs/sheets',
    }, {
      client: '@univerjs/sheets-ui',
      locale: '@univerjs/sheets-ui/locale/en-US',
      style: '@univerjs/sheets-ui/lib/index.css',
      facade: '@univerjs/sheets-ui/facade',
    }, {
      client: '@univerjs/sheets',
      locale: '@univerjs/sheets/locale/en-US',
      facade: '@univerjs/sheets/facade',
    }, {
      client: '@univerjs/sheets-ui',
      locale: '@univerjs/sheets-ui/locale/en-US',
      style: '@univerjs/sheets-ui/lib/index.css',
      facade: '@univerjs/sheets-ui/facade',
    }, {
      client: '@univerjs/sheets-formula',
      facade: '@univerjs/sheets-formula/facade',
    }, {
      client: '@univerjs/sheets-formula-ui',
      locale: '@univerjs/sheets-formula-ui/locale/en-US',
      style: '@univerjs/sheets-formula-ui/lib/index.css',
    }, {
      client: '@univerjs/sheets-numfmt',
      facade: '@univerjs/sheets-numfmt/facade',
    }, {
      client: '@univerjs/sheets-numfmt-ui',
      locale: '@univerjs/sheets-numfmt-ui/locale/en-US',
      style: '@univerjs/sheets-numfmt-ui/lib/index.css',
    }],
    server: 'No',
  }}
/>

Univer Sheets core features include a spreadsheet editor, formula engine, rendering engine, number formatting engine, design system, and UI component library. Together, they form a powerful platform for handling spreadsheets, supporting various formats and complex operations.

## Features

Univer Sheets core features include:

- **Spreadsheet Rendering**: Supports rendering of Univer Sheets, including cursor and selection drawing.
- **Cell Styling**: Allows styling of cells in the spreadsheet, including font, color, borders, and alignment.
- **Formula Calculation**: Supports adding and calculating formulas in the spreadsheet, covering nearly all Excel functions, including mathematical, statistical, text, and date functions.
- **Number Formatting**: Enables formatting of numbers in the spreadsheet, including currency, percentage, date formats, etc.
- **Gridlines and Frozen Panes**: Supports displaying gridlines and frozen panes, making it easier for users to view and edit large datasets.
- **Default Styles**: Allows setting default styles for the spreadsheet, including default font, size, color, etc.
- **Plugin System**: Supports a plugin system that allows for custom plugins, such as formula plugins, image plugins, chart plugins, etc. This is also one of the core architectural capabilities of Univer.

## Preset Mode

### Installation

```package-install
npm install @univerjs/presets @univerjs/preset-sheets-core
```

### Usage

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
})

univerAPI.createWorkbook({})
```

### Presets and Configuration

#### @univerjs/presets

This preset provides the `createUniver` method to create a Univer application, and exposes all methods and objects from **@univerjs/core** and **@univerjs/design**.

The `createUniver` method accepts a configuration object that includes options for theme, language, presets, etc. It returns a `Univer` instance `univer` and an `FUniver` instance `univerAPI` for calling the Facade API.

```typescript
interface CreateUniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
  // The list of presets to use.
  presets: IPresets[]
  // The list of plugins to use.
  plugins: IPlugins[]
}
```

Reference: [`createUniver`](/reference/methods/create-univer)

#### @univerjs/preset-sheets-core

This preset is the core preset of Univer Sheets, which includes the necessary core features for document editing, formula engine, rendering engine, etc.

```typescript
interface IUniverSheetsCorePresetConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. default: grouped mode; simple: ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the footer
  footer?: false | {
    // Sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.
    sheetBar?: boolean
    // Statistic bar includes statistics of the current selection, such as count, sum, average, etc.
    statisticBar?: boolean
    // The bottom menu includes options like highlight, gridlines, etc.
    menus?: boolean
    // The zoom slider at the bottom.
    zoomSlider?: boolean
  }
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig

  // ... More configuration options
}
```

The `menu` configuration option can be used to simply set the display or hidden state of certain specific menu items:

```typescript
UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

Here, `'sheet.command.set-range-bold'` and `'sheet.command.set-range-italic'` are the names of the commands, indicating the corresponding menu items.

Reference: [@univerjs/preset-sheets-core](/reference/packages/presets/univerjs/preset-sheets-core)

## Plugin Mode

### Installation

```package-install
npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

### Usage

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverSheetsPlugin } from '@univerjs/docs'
import { UniverSheetsUIPlugin } from '@univerjs/docs-ui'
import SheetsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'
import SheetsEnUS from '@univerjs/sheets/locale/en-US'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula-ui/lib/index.css'
import '@univerjs/sheets-numfmt-ui/lib/index.css'

import '@univerjs/engine-formula/facade'
import '@univerjs/ui/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/sheets/facade'
import '@univerjs/sheets-ui/facade'
import '@univerjs/sheets-formula/facade'
import '@univerjs/sheets-numfmt/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      DesignEnUS,
      UIEnUS,
      SheetsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaUIEnUS,
      SheetsNumfmtUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)
univer.registerPlugin(UniverSheetsFormulaUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsNumfmtUIPlugin)
```

### Plugins and Configuration

#### @univerjs/core

This plugin is the core library of Univer, providing basic functionalities such as creating Univer instances, themes, and languages.

```typescript
interface UniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
}
```

Reference: [`Univer`](/reference/classes/univer)

#### @univerjs/engine-render

This plugin is the rendering engine of Univer, responsible for rendering, scrollbars, cursor, and selection rendering. It provides the `UniverRenderEnginePlugin`.

Reference: [@univerjs/engine-render](/reference/packages/plugins/univerjs/engine-render)

#### @univerjs/engine-formula

This plugin is the formula engine of Univer, responsible for calculating and processing formulas. It provides the `UniverFormulaEnginePlugin`.

Reference: [@univerjs/engine-formula](/reference/packages/plugins/univerjs/engine-formula)

#### @univerjs/design

This plugin is the design system of Univer, providing all basic components and styles.

See: [UI Chapter](/guides/docs/ui/overview)

#### @univerjs/ui

This plugin is the UI foundation of Univer. It provides the `UniverUIPlugin`.

The `UniverUIPlugin` provides some configuration options that can be used for basic layout configuration.

```typescript
interface IUniverUIConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. default: grouped mode; simple: ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig
}
```

The `menu` configuration option can be used to simply set the display or hidden state of certain specific menu items:

```typescript
univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

Here, `'sheet.command.set-range-bold'` and `'sheet.command.set-range-italic'` are the names of the commands, indicating the corresponding menu items.

Reference: [@univerjs/ui](/reference/packages/plugins/univerjs/ui)

#### @univerjs/docs

This plugin is the core plugin of Univer Docs. It provides the `UniverDocsPlugin`.

Reference: [@univerjs/docs](/reference/packages/plugins/univerjs/docs)

#### @univerjs/docs-ui

This plugin is the UI plugin of Univer Docs, which includes UI components and interactions for the document editor. It provides the `UniverDocsUIPlugin`.

Reference: [@univerjs/docs-ui](/reference/packages/plugins/univerjs/docs-ui)

#### @univerjs/sheets

This plugin is the core plugin of Univer Sheets, providing the core functionalities of the spreadsheet editor. It provides the `UniverSheetsPlugin`.

The `UniverSheetsPlugin` provides some configuration options that can be used for the spreadsheet editor configuration.

```typescript
interface IUniverSheetsConfig {
  // If both row style and column style are set, whether row style precedes column style
  isRowStylePrecedeColumnStyle?: boolean
  // Whether auto height applies to merged cells
  autoHeightForMergedCells?: boolean
}
```

Reference: [@univerjs/sheets](/reference/packages/plugins/univerjs/sheets)

#### @univerjs/sheets-ui

This plugin is the UI plugin of Univer Sheets, which includes UI components and interactions for the spreadsheet editor. It provides the `UniverSheetsUIPlugin`.

The `UniverSheetsUIPlugin` provides some configuration options that can be used for the spreadsheet editor UI configuration.

```typescript
interface IUniverSheetsUIConfig {
  // Whether to show the footer.
  footer?: false | {
    // The sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.
    sheetBar?: boolean
    // The statistic bar includes statistics of the current selection, such as count, sum, average, etc.
    statisticBar?: boolean
    // The bottom menu includes options like highlight, gridlines, etc.
    menus?: boolean
    // The zoom slider at the bottom.
    zoomSlider?: boolean
  }
  // Whether to show the formula bar
  formulaBar?: boolean
  clipboardConfig?: {
    // Whether to show the paste options button after paste operation
    hidePasteOptions?: boolean
  }
  // The configuration for the scroll bar
  scrollConfig?: IScrollBarProps
  // Whether to show the shadow for protected ranges.
  protectedRangeShadow?: boolean
  // Whether to disable the force string alert.
  disableForceStringAlert?: boolean
  // Whether to disable the force string mark.
  disableForceStringMark?: boolean
}
```

Reference: [@univerjs/sheets-ui](/reference/packages/plugins/univerjs/sheets-ui)

## Toolbar Layout and `RibbonType`

By configuring the `ribbonType` property in `IUniverSheetsCorePresetConfig` or `IUniverUIConfig`, you can set the layout of the toolbar.

`ribbonType` supports two modes: `"default"` for grouped mode, where the toolbar is organized by function, and `"simple"` for ungrouped mode, where all tools are displayed in a flat list.

<RibbonStyle />
